import React from 'react';
import { Group } from '@vx/group';
import { Tree } from '@vx/hierarchy';
import { LinearGradient } from '@vx/gradient';
import { hierarchy } from 'd3-hierarchy';
import Links from './Links';
import Nodes from './Nodes';
import MyIcon from '@/components/MyIcon';
import ServicePhase from './ServicePhase';

export default class extends React.Component {
  render() {
    const {
      data,
      width,
      height,
      nodeClick,
      addRouteClick,
      routeGroupClick,
      nodeBorder,
      nodeFill,
      showAddNode,
      ...restProps
    } = this.props;

    let startY = 0;
    return (
      <div>
        <svg width={width} height={height}>
          <defs>
            <marker
              id="arrow"
              markerWidth="10"
              markerHeight="10"
              refX="0"
              refY="3"
              orient="auto"
              markerUnits="strokeWidth"
            >
              <path d="M0,0 L0,6 L9,3 z" fill="#000" />
            </marker>
          </defs>
          <LinearGradient id="lg" from="#fff" to="#aaa" />
          <rect width={width} height={height} rx={14} fill="#fff" />
          {data.map((root, index) => {
            let isEmpty = 0;
            if (root.nodeDtoExList.length > 1) {
              isEmpty = root.nodeDtoExList.length;
            } else {
              isEmpty = 1;
            }
            startY = startY + isEmpty * 200;
            return (
              <React.Fragment key={index}>
                {index !== data.length - 1 && (
                  <line
                    x1={98}
                    y1={startY - 48}
                    x2={98}
                    y2={startY + 32}
                    strokeWidth={2}
                    stroke="#374469"
                    markerEnd="url(#arrow)"
                  />
                )}
                <Group top={startY - isEmpty * 200}>
                  <ServicePhase
                    data={root.nodeDtoExList}
                    width={width}
                    height={height}
                    nodeClick={nodeClick}
                    groupClick={addRouteClick}
                    routeGroupClick={routeGroupClick}
                    nodeBorder={nodeBorder}
                    nodeFill={nodeFill}
                    root={root}
                    showAddNode={showAddNode}
                  />
                </Group>
              </React.Fragment>
            );
          })}
        </svg>
      </div>
    );
  }
}
